import React from 'react';
import {
    View,
    StyleSheet,
    Text,
    Image,
    Dimensions,
    TouchableWithoutFeedback,
    Animated
} from 'react-native';
import CommunityGuidesCellButton from '../button/CommunityCellButton'

import { guides_commentAction } from '../../utils'
import { guides_clickCellAction } from '../../utils'

const selectedBackgroundColor = 'rgba(230,230,230,1)'

export default class CommunityGuidesCell extends React.PureComponent {

    constructor(props) {
        super(props);
        this.bgColor = new Animated.Value(1)
        this.shouldHighlight = true;
    }

    state = {
        txtHeight: this.props.data.img.length == 0 ? null : 65,
        imgWidth: this.props.data.img.length == 0 ? null : 100,
        imgHeight: this.props.data.img.length == 0 ? null : 65,
        pic: this.props.data.img.length == 0 ? null : { uri: this.props.data.img }
    }

    componentWillUnmount() {
        this.timer && clearTimeout(this.timer)
    }

    render() {
        var color = this.bgColor.interpolate({
            inputRange: [0, 1],
            outputRange: [selectedBackgroundColor, 'white']
        })

        return (
            <TouchableWithoutFeedback
                onPress={this.clickCellAction}
                onPressIn={this.clickCellInAction}
                onPressOut={this.clickCellOutAction}>
                <Animated.View style={[styles.container, { backgroundColor: color }]}>
                    <View style={styles.viewForTxtAndImg} >
                        <View style={{ width: Dimensions.get('window').width - 20 - this.state.imgWidth, height: this.state.txtHeight }}>
                            <Text numberOfLines={1} style={styles.title}>{this.props.data.title}</Text>
                            <Text numberOfLines={3} style={styles.content}>{this.props.data.content}</Text>
                        </View>
                        <Image source={this.state.pic} style={{
                            width: this.state.imgWidth,
                            height: this.state.imgHeight,
                            resizeMode: 'cover',
                            borderRadius: 4,
                            backgroundColor: '#eeeeee'
                        }} />
                    </View>
                    <View style={styles.viewForInfoAndBtn} >
                        <View style={styles.viewForInfo}>
                            <Text style={styles.name}>{this.props.data.name}</Text>
                            <Text style={styles.time}>{this.props.data.time}</Text>
                        </View>
                        <View style={styles.viewForBtn}>
                            <CommunityGuidesCellButton
                                style={styles.thumbup}
                                type={'thumbup'}
                                normalImg={require('../../img/thumbup_normal.png')}
                                highlightImg={require('../../img/thumbup_highlight.png')}
                                title={this.props.data.thumbup == '0' ? '点赞' : this.props.data.thumbup}
                                action={this.thumbupAction}
                            />
                            <CommunityGuidesCellButton
                                style={styles.comment}
                                type={'comment'}
                                normalImg={require('../../img/comment.png')}
                                title={this.props.data.comment == '0' ? '评论' : this.props.data.comment}
                                action={this.commentAction}
                            />
                        </View>
                    </View>
                </Animated.View>
            </TouchableWithoutFeedback>
        )
    }

    clickCellOutAction = () => {
        console.log('点击cell Out')
        // Animated.timing(this.bgColor, {
        //     toValue: 1,
        //     duration: 250,
        // }).start()
        this.shouldHighlight = false
        this.bgColor.setValue(1)
    }

    clickCellInAction = () => {
        this.shouldHighlight = true
        this.timer = setTimeout(() => {
            if (this.shouldHighlight) this.bgColor.setValue(0)
        }, 100);
        console.log('点击cell In')
    }

    clickCellAction = () => {
        console.log('点击cell')
        this.bgColor.setValue(0)
        Animated.timing(this.bgColor, {
            // useNativeDriver: true,
            toValue: 1,
            duration: 250,
        }).start()
        console.log('guides_clickCellAction')
        guides_clickCellAction(this.props.data)
    }

    thumbupAction = () => {
        console.log('点赞')
    }

    commentAction = () => {
        console.log('guides_commentAction')
        guides_commentAction(this.props.data)
    }
}

const styles = StyleSheet.create({
    container: {
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 0,
        paddingTop: 5,
    },
    viewForTxtAndImg: {
        paddingTop: 5,
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    // viewForTxt: {
    //     width: Dimensions.get('window').width - 120,
    //     height: 65,
    // },
    // viewForImg: {
    //     width: 100,
    //     height: 65,
    //     resizeMode: 'cover'
    // },
    title: {
        fontSize: 15,
        fontWeight: 'bold',
        height: 22,
    },
    content: {
        fontSize: 15,
        color: '#666666'
    },
    viewForInfoAndBtn: {
        marginTop: 10,
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    viewForInfo: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    name: {
        fontSize: 12,
        color: '#999999',
    },
    time: {
        marginLeft: 10,
        fontSize: 12,
        color: '#999999',
    },
    viewForBtn: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    thumbup: {
    },
    comment: {
    }
})